<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<base href="/webcon/resources/"/>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="css/timing.css">
		<link rel="stylesheet" href="css/call.css">

		<script src="js/jquery-2.1.1.js"></script>
		<script src="layui/layui.js"></script>

		<!-- 引入ztree -->
		<link rel="stylesheet" href="widget/zTree/zTreeStyle/zTreeStyle.css"/>
		<script type="text/javascript" src="widget/zTree/jquery.ztree.all.min.js"></script>

		<script src="webrtc/bootstrap.min.js"></script>
		<script src="webrtc/ekko-lightbox.min.js"></script>
		<script src="webrtc/draggabilly.pkgd.min.js"></script>
		<script src="webrtc/adapter.js"></script>
		<!--<script src="webrtc/index2.js"></script>-->
		<script src="webrtc/kurento-utils.js"></script>
		<script src="webrtc/index_duijiang.js"></script>
		<script src="webrtc/heart.js"></script>

		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
		<script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>

		<script th:inline="javascript">
			$(function () {
				//初始化树形结构
				getWebconClientZtree("ztree_div", {
					check: true,
					showIcon: true
				});

				//初始化webrtc
				initWsRtc({
					url: [[${wsPath}]],
					name: [[${account}]]
				});

			});


			/**
			 * 手动执行
			 */
			var statusRtc = false;
			function action_task() {

				var ztreeObj = getZtree();
				var znodes = ztreeObj.getCheckedNodes(true);
				var terminal = [];
				for (var i = 0; i < znodes.length; i++) {
					if (znodes[i].isClient == 1 && znodes[i].isOnLine == 1) {
						//如果是终端
						terminal.push(znodes[i].userid + "");
					}
				}

				if(terminal.length <= 0){
					alert("请选择一台上线终端！");
					return;
				}

				if(terminal.length > 1){
					alert("最多只能选择一台对讲终端！");
					return;
				}

				if(!statusRtc){
					statusRtc = true;
					call(terminal);
				}
			}


			/**
			 * 手动停止
			 */
			function stop_task() {
				if(statusRtc){
					statusRtc = false;
					stop();
				}
			}

		</script>
	</head>
	<body>
		<div class="header">
			<div class="list-item">
				<div class="list-item-top">
					<img src="./img/bofang.png" onclick="action_task();"/>
				</div>
				<div class="desc">手动执行</div>
			</div>
			<div class="list-item">
				<div class="list-item-top">
					<img src="./img/tingzhi.png" onclick="stop_task();"/>
				</div>
				<div class="desc">手动停止</div>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-col-md2">
				<div style="height:330px;border:1px solid #EBEBEB;overflow-y: auto;">
					<div class="tit">终端列表</div>
					<!-- 树形选择器 -->
					<div id="ztree_div" class="ztree"></div>
				</div>
			</div>
			<div class="layui-col-md5">
				<!-- TODO 对方机器视频输出流 -->
				<div id="videoBig" style="height:330px;border:1px solid #EBEBEB;width:99%;float:right;overflow:hidden;">
					<video id="videoOutput" width="100%" height="100%" autoplay="" controls>
					</video>
				</div>
			</div>
			<div class="layui-col-md5">
				<!-- TODO 本机视频输出流 -->
				<div id="videoSmall" style="height:330px;border:1px solid #EBEBEB;width:99%;float:right;overflow:hidden;">
					<video id="videoInput" width="100%" height="100%" autoplay="" controls>
					</video>
				</div>
			</div>
		</div>

		<script>
			layui.use(['form', 'layer'], function() {
				var form = layui.form;
				var layer = layui.layer;
			});
		</script>
	</body>
</html>
